<template>
    <div class="app">
        <my-navbar title="我的送货单"></my-navbar>
        <tabbar
                ref="reflectName"
                class="tabbar"
                tabType="top"
                textSelectColor="red"
				 @ready="ready" 
                textUnselectColor="black"
                tabBackgroundColor="#f2f2f2"
                @pageSelected="pageSelected"
                :tabPages="tabPages"></tabbar>

    </div>
</template>

<style>
    .app{
        background-color: rgba(248, 248, 248, 0.8);
    }

    .app {
        flex: 1
    }

    .tabbar {
        flex: 1;
        width: 750px;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>

<script>
    import myNavbar from '../../components/myNavbar/myNavbar.vue'
    export default {
        data() {
            return {
                tabPages: [
                    {
                        title: '待配送',
                        selectedIcon: 'md-home',
                        url: './component/shipping/toBeDelivered.js',
                        tabName:"payment"
                    },
                    {
                        title: '配送中',
                        selectedIcon: 'md-contacts',
                        url: './component/shipping/distribution.js',
                        tabName:"delivery"
                    },
                    {
                        title: '已配送',
                        selectedIcon: 'md-globe',
                        url: './component/shipping/delivery.js',
                        tabName:"received"
                    },
                    {
                        title: '已完成',
                        selectedIcon: 'md-settings',
                        url: './component/shipping/complete.js',
                        tabName:"complete"
                    },
                ],
            }
        },
        created() {

        },
        components:{
            myNavbar
        },
        mounted(){
            // var _this = this
            // _this.$refs.reflectName.setCurrentItem(app.config.params)
        },
        methods: {
			ready(){
				this.$refs.reflectName.setCurrentItem(app.config.params)
			},
            pageSelected(params) {
                if(params.position == 0){
                    this.$refs.reflectName.reload('payment');
                }else if (params.position == 1) {
                    this.$refs.reflectName.reload('delivery');
                }else if(params.position == 2){
                    this.$refs.reflectName.reload('received');
                }else if(params.position == 3){
                    this.$refs.reflectName.reload('complete');
                }
            },
        }
    };
</script>
